<template>
    <div>
        <div class="userBox">
            <div class="avatarBox">
                <img :src="contact.user_image ? contact.user_image : 'assets/img/default/staff.png'"/>
            </div>
            <div class="avatarDesc">
                <span class="username">{{ contact.user_name }}</span><br/>
                <span class="userdesc">{{ contact.user_desc }}</span>
            </div>
        </div>
        <yd-cell-group class="listBox">
            <yd-cell-item>
                <yd-icon slot="icon" name="ucenter-outline"></yd-icon>
                <span slot="left">部门</span>
                <span slot="right">{{ contact.user_dept }}</span>
            </yd-cell-item>
            <yd-cell-item>
                <yd-icon slot="icon" name="phone2"></yd-icon>
                <span slot="left">电话</span>
                <span slot="right" class="itemvalue">{{ contact.user_phone }}</span>
            </yd-cell-item>
        </yd-cell-group>
    </div>
</template>

<script>
module.exports = {
    props: {
        contact: {type: Object, required: true}
    }
}
</script>

<style scoped>
.avatarBox {
    float: left;
    display: block;
    margin: .2rem;
    width: 1rem;
    height: 1rem;
    box-shadow: 0 0 .1rem 0px rgba(0, 0, 0, 0.3);
    border-radius: .1rem;
}
.avatarBox img {
    width: 1rem;
    height: 1rem;
    border-radius: .1rem;
}
.avatarDesc {
    padding-top: .3rem;
}
.itemvalue {
    padding-left: .2rem;
    font-size: .28rem;
    color: #000;
    -webkit-transform:scale(1,1.6);
    -moz-transform:scale(1,1.6);
}
.userBox {
    height: 1.4rem;
    width: 100%;
    position: fixed;
    top: 0;
    z-index: 100;
    background-color: #fff;
    box-shadow: 0 0 .1rem 0px rgba(0, 0, 0, 0.3);
}
.listBox {
    margin-left: 1.4rem;
    margin-top: 1.4rem;
}
.username {
    padding-left: .4rem;
    font-weight: bold;
    font-size: .38rem;
    color: #000;
}
.userdesc {
    padding-left: .4rem;
    font-size: .28rem;
    color: #cfcfcf;
}
</style>
